
<template>
  <div class="pos">
    <div class="fenxian top"></div>
    <div class="fenxian cnt"></div>
    <!-- 上部分模块 -->
    <van-row class="box_top">
      <van-row class="box_info">
        <!-- 左边 -->
        <van-col>
          <img :src="userInfo.avatar ? userInfo.avatar : avatar_default" />
        </van-col>
        <!-- 右边 -->
        <van-col class="box_info_text">
          <van-row class="box_info_text_big" :style="'font-size: '+small_font_size+'px;'">
            <van-col
              class="box_info_name"
              :style="'font-size: '+big_font_size+'px;'"
            >{{userInfo.name}}</van-col>

            <van-col>昵称：{{userInfo.nickName}}</van-col>
            <!-- <van-col>地区:{{ getAddressByDistrictCode(userInfo.areaCode) || '地区未知'}}</van-col> -->
            <van-col>地区: {{province_name? province_name : ''}} {{city_name?city_name: ''}} {{district_name? district_name :''}}</van-col>
            <!-- {{getAddressByDistrictCode(item.areaCode) || '地区未知'}} -->
          </van-row>
        </van-col>
      </van-row>
      <!-- 电话 -->
      <van-row class="tel" @click="callMobile(userInfo.mobile)">
        <van-col :style="'font-size: '+center_font_size+'px;'">电话：{{userInfo.mobile}}</van-col>
      </van-row>

      <!-- 标签分组 -->
      <!-- <van-row class="label">
        <van-col>标签分组</van-col>
        <van-col>湖北，江苏，宿迁</van-col>
      </van-row>-->
    </van-row>

    <van-row class="jieshaoren" v-if="this.$route.query.getRecommend">
      <van-col :style="'font-size: '+center_font_size+'px;'">介绍人：{{userInfo.recommendName}}</van-col>
    </van-row>

    <!-- 下部分模块 -->
    <van-row class="box_bt">
      <van-col class="title" :style="'font-size: '+small_font_size+'px;'">浏览记录</van-col>
      <van-col>
        <van-steps direction="vertical" :active="active">
          <van-step v-for="(item,index) in footprintList " :key="index">
            <van-list>
              <van-row class="footprint" :style="'font-size: '+small_font_size+'px;'">
                <van-col>{{item.addTime}}</van-col>
              </van-row>
              <van-row
                class="footprint_info"
                v-for="(item1,index1) in item.footprint"
                :key="index1"
              >
                <van-col :style="'font-size: '+min_font_size+'px;'">
                  <span>{{item1.addTime.substring(10)}}浏览了</span>
                  <span>{{item1.duration}}s</span>
                </van-col>
                <van-col
                  @click="redirectTo(item1.url)"
                  class="goods-name"
                  :style="'font-size:'+small_font_size+'px'"
                >{{item1.goodsName}}</van-col>
                <!-- :style="'font-size: '+center_font_size+'px;'" -->
              </van-row>
            </van-list>
          </van-step>
        </van-steps>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { getFootprintList, userInfo } from '@/api/api';
import { Row, Col, Step, Steps, List } from 'vant';
import avatar_default from '@/assets/images/avatar_default.png';
import areaList from '@/views/user/module-address-edit/area_all.json';

export default {
  props: {
    userId: {
      type: [String, Number],
      default: -1
    }
  },
  data() {
    return {
      areaList: areaList,
      page: 1,
      limit: 100,
      footprint: {},
      footprintList: [],
      list: [],
      userInfo: {},
      avatar_default,
      active: 0,
      province_name: '',
      city_name: '',
      district_name: '',
      min_font_size: 12,
      small_font_size: 14,
      center_font_size: 16,
      big_font_size: 18,
      getRecommend: -1,
      userInfoObj: {}
    };
  },
  created() {
    this.getList();
    this.getUserInfo();
    this.isIos();
  },
  mounted() {},
  methods: {
    // 判断安卓 iOS给定字体打小
    isIos() {
      var ua = navigator.userAgent.toLowerCase();
      if (/iphone|ipad|ipod/.test(ua)) {
        this.min_font_size = 14;
        this.small_font_size = 16;
        this.center_font_size = 18;
        this.big_font_size = 20;
        return true;
      } else if (/android/.test(ua)) {
        this.min_font_size = 12;
        this.small_font_size = 14;
        this.center_font_size = 16;
        this.big_font_size = 18;
        return false;
      }
    },
    redirectTo(link) {
      this.$router.push({ path: link });
    },
    // 根据areaCode值获取地区，对应表单在其他json数据里面
    getAddressByDistrictCode(district_code) {
      if (
        district_code == undefined ||
        district_code == null ||
        district_code == ''
      )
        return;
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      // this.  district_name =city_name,
      this.province_name = province_name;
      this.city_name = city_name;
      this.district_name = district_name;
      // return province_name + city_name + district_name;
    },

    // 获取用户浏览信息
    getList() {
      getFootprintList({
        userId: this.userId,
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.footprint = res.data.data;
        this.footprintList = res.data.data.list;
      });
    },
    //拨打电话功能
    callMobile(mobile) {
      window.location.href = 'tel:' + mobile;
    },
    // 获取用户基本信息
    getUserInfo() {
      if (this.$route.query.getRecommend) {
        this.getRecommend = 1;
      }
      userInfo({ userId: this.userId, getRecommend: this.getRecommend }).then(
        res => {
          this.userInfo = res.data.data;
          this.getAddressByDistrictCode(this.userInfo.areaCode);
          // console.log(this.userInfo);
        }
      );
    }
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Step.name]: Step,
    [Steps.name]: Steps,
    [List.name]: List
  }
};
</script>
<style lang="scss" scoped>
.jieshaoren {
  height: 42px;
  line-height: 42px;
  padding: 0 20px;
  background-color: #fff;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 30px;
  background-color: #f8f8f8;
}
.top {
  top: 102px;
}
.cnt {
  top: 144px;
}

.fenxian {
  position: absolute;
  left: 20px;
  height: 1px;
  width: calc(100% - 20px);
  background-color: #eeeeee;
}
.pos {
  position: relative;
}
.box_top {
  padding: 10px 20px 0;
  background-color: #fff;
  height: 144px;
  width: 100%;
  .box_info {
    padding-top: 8px;
    .box_info_text {
      width: calc(100% - 80px);
      margin-left: 10px;
    }
    .box_info_text_big {
      display: flex;
      flex-direction: column;
      color: #9d9b9b;
      width: 100%;
      .van-col {
        height: 22px;
        line-height: 22px;
        letter-spacing: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .box_info_name {
        // font-family: '微软雅黑';
        font-size: 20px;
        color: #000;
        height: 26px;
        line-height: 26px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    img {
      width: 70px;
      height: 70px;
      border-radius: 8px;
    }
  }
  .tel {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    height: 42px;
    line-height: 42px;
  }
  // .label {
  //   display: flex;
  //   width: 100%;
  //   height: 42px;
  //   line-height: 42px;
  //   font-size: 14px;
  //   .van-col:nth-child(2) {
  //     color: #ccc;
  //     font-size: 12px;
  //     margin-left: 20px;
  //   }
  // }
}

.box_bt {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 0 20px;
  width: 100%;
  background-color: #fff;
  .title {
    height: 40px;
    line-height: 40px;
  }
  .footprint {
    margin-bottom: 4px;
    .van-col:nth-child(1) {
      display: flex;
      flex-direction: column;
      color: #000;
    }
  }
  .footprint_info {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    .van-col:nth-child(1) {
      letter-spacing: 1px;
      color: #9d9b9b;
    }
    span:nth-of-type(1) {
      letter-spacing: 1px;
      font-weight: 500;
    }
    span:nth-of-type(2) {
      margin-left: 3px;
      color: #ee3f00;
    }
    .van-col:nth-child(2) {
      // letter-spacing: 0.3px;
      margin-top: 6px;
      color: #000;
      font-weight: 600;
    }
  }
}

.van-steps--vertical {
  padding: 0 0 0 24px;
}
.van-step {
  margin-top: 10px;
}
/deep/.van-step__circle {
  position: relative;
  display: block;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #ee3f00;
}
/deep/.van-step__circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  height: 7px;
  width: 7px;
  background-color: #fff;
  border-radius: 50%;
}
/deep/.van-icon-checked {
  position: relative;
  display: block;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #ee3f00;
}
/deep/.van-icon-checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  height: 7px;
  width: 7px;
  background-color: #fff;
  border-radius: 50%;
}
.view-router {
  // background-color: #fff;
  padding-bottom: 0;
}
/deep/.van-steps {
  overflow: visible;
}
/deep/.footprint {
  font-size: 16px;
  font-weight: 500;
}
</style>